<template>
    <el-cascader placeholder="请选择行政区"
    :show-all-levels="true"
    :options="options"
    :change-on-select="changeOnSelect"
    v-model="value"
    :filterable="true"
    @change="changeValue" />
</template>

<script>
import {getCaseOptions, getAllParentIdByOptions, getLastIdByAllId} from '@/utils/CommonUtil'
import {getUserRegionTree} from '@/utils/LocalDataUtil'
export default {
  model: {
    prop: 'allRegionId',
    event: 'changeRegion'
  },
  props: {
    allRegionId: String,
    changeOnSelect: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      options: [],
      newValue: [],
      firstValue: []
    }
  },
  computed: {
    value: {
      get: function () {
        if (this.allRegionId && this.allRegionId !== '') {
          let data = {}
          data.id = getLastIdByAllId(this.allRegionId)
          data.options = this.options
          let ids = getAllParentIdByOptions(data)
          return ids
        }
      },
      set: function (newValue) {
        this.newValue = newValue
      }
    }
  },
  components: {},
  mounted () {
    this.getOptions()
  },
  methods: {
    getOptions () {
      let regionTree = getUserRegionTree()
      if (regionTree && regionTree instanceof Array) {
        this.options = getCaseOptions(regionTree[0].children)
        this.firstValue = regionTree[0].id
      }
    },
    changeValue (data) {
      if (data && data instanceof Array) {
        let v = data.join(',')
        if (this.firstValue) {
          if (v.indexOf(this.firstValue) === -1) {
            v = this.firstValue + ',' + v
          }
        }
        this.$emit('changeRegion', v)
      }
    }
  }
}
</script>
